<template>
  <div>
    <!-- 标题 -->
    <div class="floor-title">
      <div style="height: 20px; width: 4px; border-radius: 2px;margin-right: 8px;background-color: var(--el-color-primary);"></div>
      <div>劲叶公寓 · 1层</div>
      <el-dropdown trigger="click" placement="bottom-start" @command="floorCommand">
        <el-icon class="ml20" style="cursor: pointer;"><MoreFilled /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="add">添加房间</el-dropdown-item>
            <el-dropdown-item command="delFloor">删除整层</el-dropdown-item>
            <el-dropdown-item command="batchLock">批量关联公区锁</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="floor-flexrow">
      <div class="floor-flexrow-wrap">
        <el-dropdown trigger="click" placement="right" v-for="item in 15" :key="item">
          <el-card shadow="hover" class="room-item" :class="{ 'hasCheck': item % 2 }"> Hover </el-card>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>入住详情</el-dropdown-item>
              <el-dropdown-item>开门权限</el-dropdown-item>
              <el-dropdown-item>看房密码</el-dropdown-item>
              <el-dropdown-item>预定管理</el-dropdown-item>
              <el-dropdown-item>关联设备</el-dropdown-item>
              <el-dropdown-item>房间详情</el-dropdown-item>
              <el-dropdown-item>置为脏房</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <el-dialog v-model="addRoomShow" title="添加房间" append-to-body width="500px" :fullscreen="device === 'mobile'" lock-scroll>
      <el-form :model="addRoomForm" label-width="80px">
        <el-row>
          <el-col :span="20">
            <el-form-item prop="room" label="房间号">
              <el-input v-model="addRoomForm.room"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addRoomShow = false">取消</el-button>
          <el-button type="primary" @click="addRoomShow = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name='RoomFloor'>
import useAppStore from "@/store/modules/app"

const addRoomShow = ref(false)
const data = reactive({
  addRoomForm: {
    room: undefined
  }
})

const { addRoomForm } = toRefs(data)
const device = computed(() => useAppStore().device)

function handleSelect(index) {
  console.log('select item...', index);
}



function floorCommand(value) {
  console.log(value);
  switch (value) {
    case 'add':
      addRoomShow.value = true
      break;
  
    default:
      break;
  }
}
</script>
<style lang="scss" scoped>
.floor-title {
  display: flex;
  align-items: center;
}
.floor-flexrow {
  margin-top: 4px;
  margin-bottom: 14px;
  &-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .room-item {
    width: 160px;
    height: 100px;
    margin: 6px 4px;
    cursor: pointer;
  }
  .hasCheck {
    background-color: var(--el-color-primary-light-9);
    border-color: var(--el-color-primary-light-6);
  }
}
</style>